<template>
    <el-card class="box-card" shadow="always">
        <el-icon color="#fff" @click="handleCopy" class="copyIcon"
            ><CopyDocument
        /></el-icon>
        <div class="content" ref="contentRef">
            {{content}}
            <slot></slot>
        </div>
    </el-card>
</template>
<script setup>
import { ref } from 'vue'
import useClipboard from 'vue-clipboard3'
import { ElMessage } from 'element-plus'
const contentRef = ref()
const props = defineProps({
    content: {
        type: String,
        default: '',
    },
})
const content = ref(props.content)
const { toClipboard } = useClipboard()
const handleCopy = async () => {
    await toClipboard(props.content)
    ElMessage({
        message: '复制成功',
        type: 'success',
    })
}
</script>
<style scoped>
.box-card {
    width: 100%;
    min-height: 50px;
    background-color: #292d3e;
    position: relative;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
}
.copyIcon {
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 5px;
    font-weight: bold;
}
</style>
